<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="/app/css/baseCss.css">
	<title>视频课程</title>
	<style type="text/css">
		body{
			min-width: 1200px;
			background-color: #f7f7f7;
		}
		header{
			background-color: #fff;
		}
		.centerBg{
			height: 380px;
		}
		.centerBg .imgBai{
			height: 88%;
		}
		.centerEve{
			width: 1200px;
			margin: 0 auto;
		}
		/*列表头*/
		.videoInc{
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1200px;
			background-color: #fff;
			color: #303030;
			bottom: 55px;
		}
		.videoTop{
			height: 80px;
			border-bottom: 1px solid #dddddd;
			display: flex;
			font-size: 15px;
		}
		.videoTop > div{
			width: 100px;
			text-align: center;
			line-height: 80px;
		}
		.videoTop .videoTop_tar{
			color: #377ac1;
		}
		.videoCon{
			padding: 10px 0 10px 10px;
		}
		.videoEve{
			display: block;
			font-size: 13px;
			overflow: auto;
			padding: 12px 0;
		}
		.videoTit{
			width: 60px;
			text-align: center;
			color: #b7b7b7;
			float: left;
		}
		.videoList > div{
			float: left;
			margin: 0 8px;
		}
		.videoList .videoList_tar{
			background-color: #2d7dcb;
			color: #fff;
			border-radius: 50px;
			padding: 2px 7px;
			font-size: 12px;
		}
		/*列表修改样式*/
		.professInc{
			padding: 0;
		}
		.professEve{
			margin-top: 0;
		}

		.centerPage{
			text-align: center;
			background-color: #f7f7f7;
			padding: 40px 0;
		}
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<section id="video">
			<div class="centerBg">
				<img class="imgBai" src="/app/img/bg03.jpg">
				<div class="videoInc">
					<div class="videoTop">
						<div data-val="1" class="videoTop_tar" @click="courseSw($event,1)">公开课程</div>
						<div data-val="2" @click="courseSw($event,2)">专业课程</div>
					</div>
					<div class="videoCon">
						<div class="videoEve">
							<div class="videoTit">类型</div>
							<div id="videoType" class="videoList left">
								<div data-val="0" class="videoList_tar" @click="typeSw($event)">不限</div>
								<div data-val="1" @click="typeSw($event)">c#</div>
								<div data-val="2" @click="typeSw($event)">c</div>
								<div data-val="3" @click="typeSw($event)">JAVA</div>
								<div data-val="4" @click="typeSw($event)">Unity3D</div>
								<div data-val="5" @click="typeSw($event)">易语言</div>
								<div data-val="6" @click="typeSw($event)">Authorware</div>
								<div data-val="7" @click="typeSw($event)">SQL SERVE</div>
							</div>
						</div>
						<div class="videoEve">
							<div class="videoTit">等级</div>
							<div id="videoLevel" class="videoList left">
								<div data-val="0" class="videoList_tar" @click="levelSw($event)">不限</div>
								<div data-val="1" @click="levelSw($event)">入门</div>
								<div data-val="2" @click="levelSw($event)">进阶</div>
								<div data-val="3" @click="levelSw($event)">高级</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="profess centerEve">
			<div class="professOutinc centerEveCon_inc">
				<div class="professInc centerConInc">
					<pro-fessional v-for="(proCourse,index) in proCourseList" :index="index" :id="proCourse.id" :name="proCourse.name" :introduce="proCourse.introduce" :photo="proCourse.photo"></pro-fessional>
				</div>
			</div>
			<div class="centerPage">
				<div id='page'></div>
			</div>
		</section>
		<all-footer></all-footer>
	</div>
</body>

<script type="text/javascript" src="/app/js/jquery.min.js"></script>
<script type="text/javascript" src="/app/js/initPage.js"></script>
<script type="text/javascript" src="/app/js/httpUnit.js"></script>
<script type="text/javascript" src="/app/js/vue.js"></script>
<script type="text/javascript" src="/app/component/allHeader.js"></script>
<script type="text/javascript" src="/app/component/allFooter.js"></script>
<script type="text/javascript" src="/app/component/professional.js"></script>
<script type="text/javascript">
    videoVue();

	//首页Vue函数
	function videoVue() {
        var allheader = allHeader();
	    var allfooter = allFooter();
        var professional = proFessional();
        var vm = new Vue({
            el: '#example',
            data: {
                proCourseList:"",
                // subjectType:1,
				type:0,
				level: 0
			},
			mounted:function () {
				this.courseSw();//切换顶部课程
            },
			methods:{
                //获取课程列表(分页)
                subjectsSub:function(page,isSw){
                	var Request = this.GetRequest();
                    var majorId = Request['majorId'];

                	var level = $("#videoLevel .videoList_tar").attr("data-val")
                	var languageType = $("#videoType .videoList_tar").attr("data-val");
                	// console.log($(".videoTop .videoTop_tar").index());
                    if(page==""||page==undefined||page==null){
                        page = 0;
					}
					var subjectType = $(".videoTop .videoTop_tar").attr("data-val");
                    var size = 8;
                    var sort = "id,asc";
                    var obj = JSON.stringify({
                        "subjectType": subjectType,
                        "level": level,
                        "languageType": languageType,
                        "majorId":majorId
                    });
                    httpHelperpost("/api/subjects/subjects?page="+page+"&size="+size+"&sort="+sort, obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                vm.proCourseList = value.data.content;
                                // console.log(vm.proCourseList);
                                console.log("查询成功");
                                if($("#page").text()==""){
                                    vm.pageCha(value.data.totalElements);//初始化分页插件
								}
								if(isSw==true){
                                    $("#page").html("");
                                    vm.pageCha(value.data.totalElements);//初始化分页插件
								}
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='/app/login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                            }
                        }else {}
                    });
				},
				//切换课程
				courseSw:function(that,index){
                    if(index==undefined||index==null||index==""){
                        // var Request = this.GetRequest();
                        // var index = Request['index'];
                        // if(index==1){
                        // }else{
                        // 	$(".videoTop > div").eq(index-1).addClass("videoTop_tar").siblings().removeClass("videoTop_tar");
                        // }
					}else{
                        $(that.currentTarget).addClass("videoTop_tar").siblings().removeClass("videoTop_tar");
					}

                    this.subjectsSub(null,true);//获取公共课程或专业课程(分页)
				},
				//切换类型
				typeSw:function(that){
                    $(that.currentTarget).addClass("videoList_tar").siblings().removeClass("videoList_tar");
                    this.subjectsSub(null,true);//获取公共课程或专业课程(分页)
				},
				//切换等级
                levelSw:function(that){
                    $(that.currentTarget).addClass("videoList_tar").siblings().removeClass("videoList_tar");
                    this.subjectsSub(null,true);//获取公共课程或专业课程(分页)
                },
                //初始化分页插件
              	pageCha:function (totalCount) {
                  	pageUtil.initPage('page',{
                      	totalCount:totalCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
                      	curPage:1,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
                      	showCount:9,//分页栏显示的数量
                      	pageSizeList:[10,20,50,100],//自定义分页数，默认[5,10,15,20,50]
                      	defaultPageSize:12,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
                      	isJump:true,//是否包含跳转功能，默认false
                      	isPageNum:false,//是否显示分页下拉选择，默认false
                      	isPN:true,//是否显示上一页和下一面，默认true
                      	isFL:false,//是否显示首页和末页，默认true
                      	jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
							vm.subjectsSub(curPage-1,false);
                      	},
                  	});
                  	pageUtil.curPage = 2;
              	},
                GetRequest:function () {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                        }
                    }
                    return theRequest;
                }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter,
                'pro-fessional':professional
            }
        })
    }
</script>

</html>